﻿<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta charset="utf-8">
        <title>@ViewBag.Title</title>
        <link rel="shortcut icon" href="/favicon.ico" />
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/skeleton.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/gh-buttons.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/gh-buttons.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/slicknav.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/headroom.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/jquery.mCustomScrollbar.css")" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"> </script>
        <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"> </script>
        <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"> </script>
        <script src="@Url.Content("~/Scripts/menu/jquery.slicknav.min.js")" type="text/javascript"> </script>
        <script src="@Url.Content("~/Scripts/headroom/headroom.min.js")" type="text/javascript"> </script>
        <script src="@Url.Content("~/Scripts/headroom/angular.headroom.min.js")" type="text/javascript"> </script>
        <script src="@Url.Content("~/Scripts/headroom/jQuery.headroom.min.js")" type="text/javascript"> </script>
        <script src="@Url.Content("~/Scripts/jquery.mousewheel-3.0.6.min.js")" type="text/javascript"> </script>
        <script src="@Url.Content("~/Scripts/jquery.mCustomScrollbar.min.js")" type="text/javascript"> </script>
        <style type="text/css">
            #title {
                left: 8px;
                position: absolute;
                top: 8px;
                z-index: 999;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <header id="header" class="slide header--fixed">
                <div id="title">
                    <div class="group-search">
                        <input type="text" name="location" class="textbox" id="location" value="" />
                        <a id="submitHref" href="#" class="button icon search">Find</a>
                    </div>
                    @*<div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>*@
                </div>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                    </ul>
                </nav>
                <div id="slicknav"></div>
            </header>
            <div id="content" class="container">
                @RenderBody()
            </div>
            @*<footer>
            </footer>*@
        </div>
        <script type="text/javascript">

        //Autocomplete variables
            var input = document.getElementById('location');
            var submitHref = document.getElementById('submitHref');
            var place;
            var autocomplete = new google.maps.places.Autocomplete(input);

            //Google Map variables
            var map;
            var marker;

            //Add listener to detect autocomplete selection
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                place = autocomplete.getPlace();
                //console.log(place);
            });

            //Reset the inpout box on click
            input.addEventListener('click', function() {
                input.value = "";
            });

            submitHref.addEventListener('click', function() {
                if (place != undefined) {
                    var newlatlong = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
                    map.setCenter(newlatlong);
                    marker.setPosition(newlatlong);
                    map.setZoom(15);
                }
            });

            function initialize() {
                var myLatlng = new google.maps.LatLng(10.7668701, 106.60969079999995);
                var mapOptions = {
                    zoom: 15,
                    center: myLatlng
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                //            map.set('styles', [
                //                              {
                //                                  featureType: 'road',
                //                                  elementType: 'geometry',
                //                                  stylers: [
                //                                  { color: '#ff0000' },
                //                                  { weight: 1.6 }
                //                                ]
                //                              }, {
                //                                  featureType: 'road',
                //                                  elementType: 'labels',
                //                                  stylers: [
                //                                  { saturation: -100 },
                //                                  { invert_lightness: true }
                //                                ]
                //                              }, {
                //                                  featureType: 'landscape',
                //                                  elementType: 'geometry',
                //                                  stylers: [
                //                                  { hue: '#ffff00' },
                //                                  { gamma: 1.4 },
                //                                  { saturation: 82 },
                //                                  { lightness: 96 }
                //                                ]
                //                              }, {
                //                                  featureType: 'poi.school',
                //                                  elementType: 'geometry',
                //                                  stylers: [
                //                                  { hue: '#fff700' },
                //                                  { lightness: -15 },
                //                                  { saturation: 99 }
                //                                ]
                //                              }
                //                            ]);

                var markerImage = new google.maps.MarkerImage('https://a1.muscache.com/airbnb/static/map_search/markers-a60404ecb490baee4c7b7014c87ab965.png',
                    new google.maps.Size(30, 30),
                    new google.maps.Point(22, 40));

                marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Main map',
                    icon: markerImage
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

            $(function() {
                $('#menu').slicknav({
                    label: '',
                    prependTo: '#slicknav'
                });
                $("header").headroom({
                    "tolerance": 5,
                    "offset": 50,
                    "classes": {
                        "initial": "animated",
                        "pinned": "swingInX",
                        "unpinned": "swingOutX",
                        "top": "headroom--top",
                        "notTop": "headroom--not-top"
                    }
                });
            });
        </script>
    </body>
</html>